import { React, useState, useEffect } from 'react'
import {useTranslation} from "react-i18next";
import {del_bank, getbankinfo} from "@/request/api";
import './Record/record.css'
import {Button, Dialog, ErrorBlock, Toast} from "antd-mobile";
import {LeftOutline} from "antd-mobile-icons";
import {useNavigate} from "react-router-dom";

export default function cardList() {
    const { t, i18n } = useTranslation();
    const [cardList, setCardList] = useState([])
    let navigate = useNavigate();

    const getList = () =>{
        getbankinfo({}).then(res =>{
            if (res.code == 0){
                setCardList(res.data)
            }
        })
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <>
            <div className='header'>
                <div className='backIcon' onClick={() => { navigate(-1) }}>
                    <LeftOutline />
                </div>
                <p>{t('pcs2')}</p>
            </div>
            {cardList.map((item, index) => (
                <div key={index}>
                    <div className="detail_list" style={{justifyContent: 'space-between', padding:'16px 24px'}}>
                        <div>
                            <p style={{fontSize: 20}}>{item.bank_type == 1? 'BANK': 'USDT'}</p>
                            <p onClick={
                                () =>{
                                    Dialog.confirm({
                                        content: t('pcs11') + '?',
                                        confirmText: t('ty1'),
                                        cancelText: t('ty2'),
                                        onConfirm: async () => {
                                            let res = await del_bank({id: item.id})
                                            if (res.code == 0){
                                                getList()
                                                Toast.show({
                                                    content: res.info,
                                                    duration: 2500
                                                })
                                            }else {
                                                Toast.show({
                                                    icon: 'fail',
                                                    content: res.info,
                                                    duration: 2500
                                                })
                                            }
                                        },
                                    })
                                }
                            }>{t('pcs11')}</p>
                        </div>
                        <div style={{ fontSize: 18}}>
                            <p>{item.username}</p>
                            <p style={{fontSize: 16, marginTop: 4}}>{item.bankname}</p>
                            <p style={{fontSize: 14}}>{item.cardnum}</p>
                        </div>
                    </div>
                </div>
            ))}

            {!cardList.length && <ErrorBlock
                title={t('t25')}
                image='./assets/index/empty.svg'
                style={{
                    '--image-height': '150px',
                }}
                description={<span></span>}
            >
            </ErrorBlock>}
            <div style={{width: '90%', margin: '0 auto'}} onClick={() => { navigate('/AddCard') }}>
                <Button  block color='primary' >
                    {t('pcs10')}
                </Button>
            </div>
        </>
    )
}
